<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <p id="interface">
          <el-collapse accordion>
            <el-collapse-item name="1">
              <template #title
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Request:
              </template>
              <div>{{ props.row.request_body }}</div>
            </el-collapse-item>
          </el-collapse>
        </p>
        <p id="interface">
          <el-collapse accordion>
            <el-collapse-item name="1">
              <template #title
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Response:
              </template>
              <div>{{ props.row.response_body }}</div>
            </el-collapse-item>
          </el-collapse>
        </p>
      </template>
    </el-table-column>
    <el-table-column label="InterFace" prop="inter_face" />
    <el-table-column label="Status" prop="status" />
    <el-table-column label="CreateDate" prop="create_date" />
  </el-table>
</template>

<script>
import axios from "axios";

export default {
  name: 'GetTable',
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    axios.get("/get").then((res) => {
        console.log(res);
        this.tableData = [...res.data];
      }).catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
#interface {
    line-height:1
}
</style>